// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;

.section-intro {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 100%),
        url('/media/img/newsletter/intro-mozsummit-600.jpg') center center no-repeat,
        $color-ink-80;
    @include background-size(cover);
    color: $color-white;
    text-align: center;

    .mzp-l-content {
        width: 100%;
        padding: 60px 0 40px;

        @media #{$mq-md} and #{$mq-tall} {
            padding: 100px 0;
        }

        @media #{$mq-md} and (min-height: 800px) {
            padding: 150px 0;
        }
    }

    .page-title {
        color: $color-white;
        margin: 0;
        text-shadow:
            0 0 10px rgba(0, 0, 0, 0.01),
            0 0 5px rgba(0, 0, 0, 0.025),
            0 1px 1px rgba(0, 0, 0, 0.5);
    }

    @media #{$mq-md} {
        background:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 100%),
            url('/media/img/newsletter/intro-mozsummit-1000.jpg') center center no-repeat,
            $color-ink-80;
        @include background-size(cover);
    }

    @media #{$mq-lg} {
        background:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 100%),
            url('/media/img/newsletter/intro-mozsummit-2000.jpg') center center no-repeat,
            $color-ink-80;
        @include background-size(cover);
    }

    @media #{$mq-xl} {
        background:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 100%),
            url('/media/img/newsletter/intro-mozsummit-3000.jpg') center center no-repeat,
            $color-ink-80;
        @include background-size(cover);
    }
}

.section-subscribe {
    background: $color-white;

    h2 {
        @include text-title-xs;
        font-weight: normal;
        margin: $spacing-lg auto $spacing-xl;
        text-align: center;
    }
}

.mzp-c-newsletter-thanks {
    text-align: center;
}
